<template>
  <view class="global-sign-box">
    <view class="count-d-block" v-if="isViewRedBag">
      <image :src="staticHost + '/sign_regbag.png'" class="center-ico" mode="aspectFill" @tap="showRecPop"></image>
    </view>

    <!--  -->
    <!-- 领取金币 -->
    <u-popup
      v-model="isViewRecPop"
      class="rec-bag-pop"
      :border-radius="12"
      mode="center"
      :mask="true"
      @close="closeRecGoldDia"
    >
      <view :class="['relative', isMpKuaishou ? 'ks-rec-dia' : '']">
        <image :src="staticHost + '/rec_bag_success.png'" mode="widthFix"></image>
        <view class="flex items-center font18 font-medium justify-center absolute" style="top:94rpx;width:100%;">
          <image :src="staticHost +'/sign-seq.png'" mode="widthFix" style="width:32rpx;"></image>
          <text style="margin:0 32rpx;color:#660100;">{{ (bagList.signIndex == 1 || bagList.signIndex == -1) ? '红包领取成功' : '签到成功'  }}</text>
          <image :src="staticHost +'/sign-seq.png'" mode="widthFix" style="width:32rpx;"></image>
        </view>
        <view class="absolute text-center" style="bottom:168rpx; width:100%;color:#C7372A;">
          <text style="font-size:64rpx;font-weight:600;margin-right:8rpx;">+{{ golds }}</text>金币
        </view>
        <button class="pop-rec-btn" @tap="toReceive">{{ (bagList.signIndex == 1 || bagList.signIndex == -1) ? '立即提现' : '立即收下' }}</button>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { staticHost, version, appId } from '@/setting';
import { QueryEffectiveBags, ReceiveBag } from '../api/index'
import { isMpKuaishou } from '@/utils/platform'

const app = getApp();
export default {
  props: {
    eventName: {
      type: String,
      default: ''
    }
  },
  computed: {
    isViewRedBag() {
      if(this.bagList.bagId > -1) {
        return true;
      }
      return false;
    }
  },
  data() {
    return {
      isMpKuaishou,
      staticHost,
      isViewRecPop: false,
      golds: 0,
      bagList: {}
    };
  },
  created() {
    uni.$on(`onShow${this.eventName}`, (data) => {
      console.log(`监听 onShow${this.eventName}`, data);
      this.queryEffectiveBags();
    });
  },
  beforeDestroy() { //为了避免重复监听，在组件销毁前，关闭监听
    console.log('签到红包弹窗销毁');
    uni.$off(`onShow${this.eventName}`);
  },
  options: {
    styleIsolation:'shared'
  },
  methods: {
    showRecPop() {
      let item = this.bagList
      this.golds = item.golds;

      // 如果是第一天
      if (this.bagList.signIndex == 1 || this.bagList.signIndex == -1) {
        ReceiveBag({
          id: item.bagId,
        }).then(res => {
          if (res.code == 200) {
            this.$showToast('领取成功')
            this.$emit('receiveSuccess')
            this.isViewRecPop = true;
            
            let userInfo = app.globalData.userInfo;
            if (userInfo && userInfo.userId && this.$uma && this.$uma.trackEvent) {
              this.$uma.trackEvent('receive_redbag', {
                userId: userInfo.userId,
                loginId: userInfo.loginId,
                appId,
                version
              });
            }
          }
        })
      } else {
        this.isViewRecPop = true;
      }
    },
    toReceive() {
      let item = this.bagList
      if (item.signIndex == 1 || item.signIndex == -1) {
        this.closeRecGoldDia();
        // 已经领取，去提现
        this.$navigateTo(`/pages/welfare/withdrawal`)
        return;
      }
      ReceiveBag({
        id: item.bagId,
      }).then(res => {
        if (res.code == 200) {
          this.$showToast('领取成功')
          this.closeRecGoldDia();
          this.queryEffectiveBags();
          this.$emit('receiveSuccess')
          let userInfo = app.globalData.userInfo;
          if (userInfo && userInfo.userId && this.$uma && this.$uma.trackEvent) {
            this.$uma.trackEvent('receive_redbag', {
              userId: userInfo.userId,
              loginId: userInfo.loginId,
              appId,
              version
            });
          }
        }
      })
    },
    queryEffectiveBags() {
      console.log('app.globalData>>>> ', app.globalData);
      let userInfo = app.globalData.userInfo;
      if (userInfo && userInfo.userId) {
        QueryEffectiveBags().then(res => {
          if (res.code == 200) {
            this.bagList = res.data || {}
          }
        })
      } else {
        this.bagList = {};
      }
    },
    closeRecGoldDia() {
      this.isViewRecPop = false;
      this.queryEffectiveBags();
    },
  },
};
</script>